<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XHR POST</title>
    <script src="../../static/js/min.js"></script>
    <script src="../../static/js/xhr.js"></script>
</head>
<body>
<form action="" method="post">
    {% csrf_token %}
    <label>
        <input type="text" name="username">用户名
    </label>
    <label>
        <input type="text" name="password">密码
    </label>
    <input type="submit" value="普通提交">
</form>
    <span>{{ username }}</span>
    <span id="content"></span>
    <div style="width: 100px;height: 100px"></div>
    <button onclick="send_post()">点我发送POST请求</button>
</body>
    <script>
        function send_post(){
            {#创建xhr对象#}
            var xhr=create_xhr()
        {#    构造请求#}
            xhr.open('POST','/user/post/')
        {#    构造回调函数#}
            xhr.onreadystatechange=function (){
                if (xhr.status===200 && xhr.readyState===4){
                    var content=document.getElementById("content")
                    window.alert(xhr.responseText)
                }
            }
            var username=$("[name='username']").val()
            var password=$("[name='password']").val()
            var csrfmiddlewaretoken=$("[name='csrfmiddlewaretoken']").val()
            {#设置请求头,默认的请求头为text/html; charset=utf-8#}
            xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
            xhr.send('csrfmiddlewaretoken='+csrfmiddlewaretoken+"&username="+username+"&password="+password)
        }
    </script>
</html>